<div [@routerTransition]>
    <div class="content d-flex flex-column flex-column-fluid">
        <sub-header [title]="l('AnswerQuestion')+l('Dashboard')" [description]="naireName">
            <div action="back"><i class="icon-fanhui text-info" (click)="goBack()"></i></div>
            <div role="actions">
            </div>
        </sub-header>

        <div [class]="containerClass">
            <div class="card card-custom gutter-b">
                <div class="card-body">
                    <tabset class="fortuneTabset tab-container">
                        <!-- 默认tab 0 游戏pk 1 比赛 2 投票 3 调查 -->
                        <tab heading="{{l('UserData')}}" (selectTab)="getUserPapers($event)">
                            <div class="row">
                                <form class="horizontal-form" autocomplete="off">
                                    <div class="m-form">
                                        <div class="row align-items-center mb-4">
                                            <div class="col-3">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label>{{l('name')}}</label>
                                                    <div class="input-group">
                                                        <input [(ngModel)]="filter2" name="filter2" autoFocus class="form-control m-input" (keyup.enter)="getUserPapers()" [placeholder]="l('SearchWithThreeDot')" type="text">
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 时间范围筛选 -->
                                            <div class="col-3" style="position:relative;">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label>{{l('Date')}}</label>
                                                    <date-range-picker name="SampleDateRangePicker" [showButton]="false" (buttonEmit)="getUserPapers()" [(startDate)]="StartTime" [(endDate)]="EndTime" [allowFutureDate]="true" [needInitDate]="true">
                                                    </date-range-picker>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label>&nbsp;</label>
                                                    <div class="input-group">
                                                        <button type="button" class="btn btn-primary" [buttonBusy]="UserPrimeng.isLoading" (click)="getUserPapers()">
                                                            <i class="la la-refresh"></i>
                                                            {{l("search")}}
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-2" *ngIf="appSession.tenantId==5152">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label>&nbsp;</label>
                                                    <div class="input-group">
                                                        <button type="button" class="btn btn-primary" [buttonBusy]="UserPrimeng.isLoading" (click)="GetUserPaperListToExcel()">
                                                            下载报表
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <div class="row align-items-center">
                                <div class="primeng-datatable-container" [busyIf]="UserPrimeng.isLoading">
                                    <p-table #UserDataTable (onLazyLoad)="getUserPapers($event)" [value]="UserPrimeng.records" [rows]="UserPrimeng.defaultRecordsCountPerPage" [paginator]="false" [lazy]="true" [(selection)]="UserCheckedList" [resizableColumns]="UserPrimeng.resizableColumns" responsive="UserPrimeng.isResponsive">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th>{{l('Actions')}}</th>
                                                <th style="width:5%">{{l('RecordId')}}</th>
                                                <th>
                                                    {{l('userNickName')}}
                                                </th>
                                                <th>
                                                    {{l('headImage')}}
                                                </th>
                                                <th>
                                                    {{l('Questions')}}{{l('Name')}}
                                                </th>
                                                <th>
                                                    {{l('Questions')}}{{l('amount')}}
                                                </th>
                                                <th pSortableColumn="creationTime">
                                                    {{l('Date')}}
                                                    <p-sortIcon field="creationTime"></p-sortIcon>
                                                </th>
                                                <!-- <th>
                                                    {{l('rightAmount ')}}
                                                </th>
                                                <th>
                                                    {{l('score')}}
                                                </th> -->

                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-record let-i="rowIndex">
                                            <tr [pSelectableRow]="record" [attr.trid]="record.id">
                                                <td>
                                                    <div class="btn-group dropdown" dropdown normalizePosition>
                                                        <button class="dropdown-toggle btn btn-sm btn-primary" data-toggle="dropdown" dropdownToggle aria-haspopup="true" aria-expanded="false">
                                                            <i class="fa fa-cog"></i>
                                                            <span class="caret"></span> {{l("Actions")}}
                                                        </button>
                                                        <ul class="dropdown-menu" *dropdownMenu>
                                                            <li>
                                                                <a (click)="goDetail(record)" class="icon-xiangqing dropdown-item">{{l('Detail')}}</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                                <td> {{transIndex(i,UserPaginator)}}</td>
                                                <td> {{record.snsUserInfo.nickname}}</td>
                                                <td><img [src]="fixFileUrl(record.snsUserInfo.headimgurl)" /></td>
                                                <td>
                                                    {{record.paper.name}}
                                                </td>
                                                <td>
                                                    <span>{{record.answeredQuestionCount}}</span>
                                                </td>
                                                <td>
                                                    <span>{{record.creationTime | date:"yyyy-MM-dd hh:mm"}}</span>
                                                </td>
                                                <!-- <td>
                                                    <span>{{record.correctCount}}</span>
                                                </td>
                                                <td>
                                                    <span>{{record.totalScore}}</span>
                                                </td> -->
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="emptymessage" let-records>
                                            <tr *ngIf="UserPrimeng.records">
                                                <td colspan="6">
                                                    <img class="emptymessage" src="/assets/common/images/placeholder/productinfoHolder.png" />
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                    <div class="primeng-paging-container">
                                        <p-paginator [rows]="UserPrimeng.defaultRecordsCountPerPage" #UserPaginator (onPageChange)="getUserPapers($event)" [totalRecords]="UserPrimeng.totalRecordsCount" [rowsPerPageOptions]="UserPrimeng.predefinedRecordsCountPerPage">
                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{l('TotalRecordsCount', UserPrimeng.totalRecordsCount)}}
                                        </span>
                                    </div>
                                </div>
                                <!--<Primeng-Datatable-End>-->
                            </div>
                        </tab>
                        <!-- 答题成绩 //游戏pk/比赛  -->
                        <tab heading="{{l('CompetitionStatistic')}}" *ngIf="paperUsageType==0||paperUsageType==1" customClass="m-tabs__item" (selectTab)="getUserPapers($event)">
                            <div class="row">
                                <form class="horizontal-form" autocomplete="off">
                                    <div class="m-form">
                                        <div class="row align-items-center mb-4">
                                            <div class="col-3">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label>{{l('name')}}</label>
                                                    <div class="input-group">
                                                        <input [(ngModel)]="filter2" name="filter2" autoFocus class="form-control m-input" (keyup.enter)="getUserPapers()" [placeholder]="l('SearchWithThreeDot')" type="text">
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 时间范围筛选 -->
                                            <div class="col-3" style="position:relative;">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label>{{l('Date')}}</label>
                                                    <date-range-picker name="SampleDateRangePicker" [showButton]="false" (buttonEmit)="getUserPapers()" [(startDate)]="StartTime" [(endDate)]="EndTime" [allowFutureDate]="true" [needInitDate]="true">
                                                    </date-range-picker>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label>&nbsp;</label>
                                                    <div class="input-group">
                                                        <button type="button" class="btn btn-primary" [buttonBusy]="UserPrimeng.isLoading" (click)="getUserPapers()">
                                                            <i class="la la-refresh"></i>
                                                            {{l("search")}}
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <div class="row align-items-center">
                                <div class="primeng-datatable-container" [busyIf]="UserPrimeng.isLoading">
                                    <p-table #UserDataTable (onLazyLoad)="getUserPapers($event)" [value]="UserPrimeng.records" [rows]="UserPrimeng.defaultRecordsCountPerPage" [paginator]="false" [lazy]="true" [(selection)]="UserCheckedList" [resizableColumns]="UserPrimeng.resizableColumns" responsive="UserPrimeng.isResponsive">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <!-- <th>{{l('Actions')}}</th> -->
                                                <th style="width:5%">{{l('RecordId')}}</th>
                                                <th>
                                                    {{l('userNickName')}}
                                                </th>
                                                <th>
                                                    {{l('headImage')}}
                                                </th>
                                                <th>
                                                    {{l('Questions')}}{{l('Name')}}
                                                </th>
                                                <th>
                                                    {{l('Questions')}}{{l('amount')}}
                                                </th>
                                                <th pSortableColumn="creationTime">
                                                    {{l('Date')}}
                                                    <p-sortIcon field="creationTime"></p-sortIcon>
                                                </th>
                                                <th>
                                                    {{l('rightAmount ')}}
                                                </th>
                                                <th>
                                                    {{l('score')}}
                                                </th>

                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-record let-i="rowIndex">
                                            <tr [pSelectableRow]="record" [attr.trid]="record.id">
                                                <!-- <td>
                                                    <div class="btn-group dropdown" dropdown normalizePosition>
                                                        <button class="dropdown-toggle btn btn-sm btn-primary"
                                                            data-toggle="dropdown" dropdownToggle aria-haspopup="true"
                                                            aria-expanded="false">
                                                            <i class="fa fa-cog"></i>
                                                            <span class="caret"></span> {{l("Actions")}}
                                                        </button>
                                                        <ul class="dropdown-menu" *dropdownMenu>
                                                            <li>
                                                                <a (click)="goDetail(record)"
                                                                    class="icon-xiangqing">{{l('Detail')}}</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td> -->
                                                <td> {{transIndex(i,UserPaginator)}}</td>
                                                <td> {{record.snsUserInfo.nickname}}</td>
                                                <td><img [src]="fixFileUrl(record.snsUserInfo.headimgurl)" /></td>
                                                <td>
                                                    {{record.paper.name}}
                                                </td>
                                                <td>
                                                    <span>{{record.answeredQuestionCount}}</span>
                                                </td>
                                                <td>
                                                    <span>{{record.creationTime | date:"yyyy-MM-dd hh:mm"}}</span>
                                                </td>
                                                <td>
                                                    <span>{{record.correctCount}}</span>
                                                </td>
                                                <td>
                                                    <span>{{record.totalScore}}</span>
                                                </td>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="emptymessage" let-records>
                                            <tr *ngIf="UserPrimeng.records">
                                                <td colspan="6">
                                                    <img class="emptymessage" src="/assets/common/images/placeholder/productinfoHolder.png" />
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                    <div class="primeng-paging-container">
                                        <p-paginator [rows]="UserPrimeng.defaultRecordsCountPerPage" #UserPaginator (onPageChange)="getUserPapers($event)" [totalRecords]="UserPrimeng.totalRecordsCount" [rowsPerPageOptions]="UserPrimeng.predefinedRecordsCountPerPage">
                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{l('TotalRecordsCount', UserPrimeng.totalRecordsCount)}}
                                        </span>
                                    </div>
                                </div>
                                <!--<Primeng-Datatable-End>-->
                            </div>
                        </tab>
                        <!-- 投票数据 // 投票  -->
                        <tab heading="{{l('排行榜')}}" *ngIf="paperUsageType==0||paperUsageType==1" customClass="m-tabs__item" (selectTab)="getPaperAnswerReport($event)">
                            <div class="row">
                                <form class="horizontal-form" autocomplete="off">
                                    <div class="m-form">
                                        <div class="row align-items-center mb-4">
                                            <div class="col-3">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label>{{l('name')}}</label>
                                                    <div class="input-group">
                                                        <input (keyup.enter)="getPaperAnswerReport()" [(ngModel)]="filter" name="filter" autoFocus class="form-control m-input" [placeholder]="l('Name')" type="text">
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 时间范围筛选 -->
                                            <div class="col-3" style="position:relative;">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label>{{l('Date')}}</label>
                                                    <date-range-picker name="SampleDateRangePicker" [showButton]="false" (buttonEmit)="getPaperAnswerReport()" [(startDate)]="StartTime" [(endDate)]="EndTime" [allowFutureDate]="true" [needInitDate]="true">
                                                    </date-range-picker>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label>&nbsp;</label>
                                                    <div class="input-group">
                                                        <button type="button" class="btn btn-primary" [buttonBusy]="VotePrimeng.isLoading" (click)="getPaperAnswerReport()">
                                                            <i class="la la-refresh"></i>
                                                            {{l("search")}}
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-4 text-right">
                                                <label>&nbsp;</label>
                                                <button class="btn btn-primary" (click)="export()" [buttonBusy]="exportLoading">
                                                    <i class="icon-excel"></i> {{l('export')}} </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="row align-items-center">
                                <!--<Primeng-Datatable-Start>-->
                                <div class="primeng-datatable-container" [busyIf]="VotePrimeng.isLoading">
                                    <!-- resizableColumns="VotePrimeng.resizableColumns" -->
                                    <p-table #VoteDataTable (onLazyLoad)="getPaperAnswerReport($event)" [value]="VotePrimeng.records" [rows]="VotePrimeng.defaultRecordsCountPerPage" [paginator]="false" [lazy]="true" [(selection)]="VoteCheckedList" [resizableColumns]="VotePrimeng.resizableColumns" responsive="VotePrimeng.isResponsive">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th style="width:5%">{{l('RecordId')}}</th>
                                                <th>
                                                    {{l('bugDescription')}}
                                                </th>
                                                <th>
                                                    {{l('prefix')}}
                                                </th>
                                                <th>
                                                    {{l('questionItemName')}}
                                                </th>
                                                <th>
                                                    {{l('amount')}}
                                                </th>
                                                <th>
                                                    {{l('percentage')}}
                                                </th>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-record let-i="rowIndex">
                                            <tr [pSelectableRow]="record" [attr.trid]="record.id">
                                                <td> {{transIndex(i,VotePaginator)}}</td>
                                                <td>
                                                    <span>{{ record.questionContent }}</span>
                                                </td>
                                                <td>
                                                    <span>{{record.prefix}}</span>
                                                </td>
                                                <td>
                                                    <span>{{record.questionItemName}}</span>
                                                </td>
                                                <td>
                                                    <span>{{record.count}}</span>
                                                </td>
                                                <td>
                                                    <span>{{record.percentage}}%</span>
                                                </td>

                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="emptymessage" let-records>
                                            <tr *ngIf="VotePrimeng.records">
                                                <td colspan="6">
                                                    <img class="emptymessage" src="/assets/common/images/placeholder/productinfoHolder.png" />
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                    <div class="primeng-paging-container">
                                        <p-paginator [rows]="VotePrimeng.defaultRecordsCountPerPage" #VotePaginator (onPageChange)="getPaperAnswerReport($event)" [totalRecords]="VotePrimeng.totalRecordsCount" [rowsPerPageOptions]="VotePrimeng.predefinedRecordsCountPerPage">
                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{l('TotalRecordsCount', VotePrimeng.totalRecordsCount)}}
                                        </span>
                                    </div>
                                </div>
                                <!--<Primeng-Datatable-End>-->
                            </div>
                            <div class="row">
                                <div class="portlet-body-morris-fit morris-chart" style="height: 600px;width: 100%;">
                                    <app-charts #columnChart chartId="columnChart" chartType="Column"></app-charts>
                                </div>
                            </div>
                        </tab>
                        <!-- 调查结果 // 调查  -->
                        <tab heading="{{l('Statistics')}}" *ngIf="paperUsageType==2||paperUsageType==3" customClass="m-tabs__item" (selectTab)="getPaperAnswerCompetitionReport($event)">
                            <div class="row">
                                <form class="horizontal-form" autocomplete="off">
                                    <div class="m-form">
                                        <div class="row align-items-center mb-4">
                                            <div class="col-3">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label>{{l('name')}}</label>
                                                    <div class="input-group">
                                                        <input [(ngModel)]="filter" name="filter" autoFocus class="form-control m-input" (keyup.enter)="getPaperAnswerCompetitionReport()" [placeholder]="l('Name')" type="text">
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 时间范围筛选 -->
                                            <div class="col-3" style="position:relative;">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label>{{l('Date')}}</label>
                                                    <date-range-picker name="SampleDateRangePicker" [showButton]="false" (buttonEmit)="getPaperAnswerReport()" [(startDate)]="StartTime" [(endDate)]="EndTime" [allowFutureDate]="true" [needInitDate]="true">
                                                    </date-range-picker>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label>&nbsp;</label>
                                                    <div class="input-group">
                                                        <button type="button" class="btn btn-primary" [buttonBusy]="VotePrimeng.isLoading" (click)="getPaperAnswerCompetitionReport()">
                                                            <i class="la la-refresh"></i>
                                                            {{l("search")}}
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="row align-items-center">
                                <!--<Primeng-Datatable-Start>-->
                                <div class="primeng-datatable-container" [busyIf]="ComPrimeng.isLoading">
                                    <!-- resizableColumns="ComPrimeng.resizableColumns" -->
                                    <p-table #ComDataTable (onLazyLoad)="getPaperAnswerCompetitionReport($event)" [value]="ComPrimeng.records" [rows]="ComPrimeng.defaultRecordsCountPerPage" [paginator]="false" [lazy]="true" [(selection)]="ComCheckedList" [resizableColumns]="ComPrimeng.resizableColumns" responsive="ComPrimeng.isResponsive">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th style="width:5%">{{l('RecordId')}}</th>
                                                <th>
                                                    {{l('nickName')}}
                                                </th>
                                                <th>
                                                    {{l('headImage')}}
                                                </th>
                                                <th>
                                                    {{l('Rank')}}
                                                </th>

                                                <th>
                                                    {{l('score')}}
                                                </th>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-record let-i="rowIndex">
                                            <tr [pSelectableRow]="record" [attr.trid]="record.id">
                                                <td> {{transIndex(i,ComPaginator)}}</td>
                                                <td>
                                                    <span>{{record.nickName}}</span>
                                                </td>
                                                <td>
                                                    <img [src]="fixFileUrl(record.headImage)" />
                                                </td>
                                                <td>
                                                    <span>{{record.rank}}</span>
                                                </td>

                                                <td>
                                                    <span>{{record.totalScore}}</span>
                                                </td>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="emptymessage" let-records>
                                            <tr *ngIf="ComPrimeng.records">
                                                <td colspan="6">
                                                    <img class="emptymessage" src="/assets/common/images/placeholder/productinfoHolder.png" />
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                    <div class="primeng-paging-container">
                                        <p-paginator [rows]="ComPrimeng.defaultRecordsCountPerPage" #ComPaginator (onPageChange)="getPaperAnswerCompetitionReport($event)" [totalRecords]="ComPrimeng.totalRecordsCount" [rowsPerPageOptions]="ComPrimeng.predefinedRecordsCountPerPage">
                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{l('TotalRecordsCount', ComPrimeng.totalRecordsCount)}}
                                        </span>
                                    </div>
                                </div>
                                <!--<Primeng-Datatable-End>-->

                            </div>
                        </tab>

                    </tabset>
                    <naireDetail #naireDetail (modalSave)="getUserPapers()"></naireDetail>
                </div>
            </div>
        </div>
    </div>
</div>